<script setup>
import { ref } from 'vue'
import AtLqInput from './AtLqInput.vue';
let username = ref('')
</script>
<template>
  <div class="myfather">
    <h2>父组件</h2>
    <!-- 用户名:<input type="text" v-model="username"> -->

    <!-- :value其实是数据到页面的单项绑定 @input="username=$event.target.value"实现了页面到数据-->
    <!-- 这样的写法就是等价于 v-model -->
    <!-- 用户名:<input type="text" :value="username" @input="username=$event.target.value"> -->


    <!-- v-model用在组件标签上 -->
    <!-- vue2中使用的是 :value  和  @input -->
    <!-- <AtLqInput :value="username" @input="username=$event"/> -->
    <!-- vue3中使用的是 :modelValue  和  @update:modelValue -->
    <AtLqInput v-model="username"/>
    <!-- <AtLqInput 
    :modelValue="username" 
    @update:modelValue="username=$event"/> -->
  </div>
</template>
<style scoped>
.myfather {
  background-color: #aa239a;
  padding: 10px;
  border: 1px solid rgb(176, 31, 123)
}
</style>